<template>
  <!-- 销售额柱状图 -->
  <div>
    <div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style="height:290px;width:100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'SalesChart',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    data: {
      handler() {
        this.$nextTick(() => this.initChart());
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.ParkingLotLoadRanking;
      if (!chartDom) return;
      const myChart = echarts.init(chartDom);
      const days = this.data.map(item => item._id);
      const sales = this.data.map(item => item.totalAmount);
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: [{ type: 'category', data: days, axisTick: { alignWithLabel: true } }],
        yAxis: [{ type: 'value' }],
        series: [{
          name: '日销售额',
          type: 'bar',
          barWidth: '60%',
          itemStyle: { color: 'rgba(57,162,255)' },
          data: sales
        }]
      };
      myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>

</style>